<template>
    <l-layout class="l-tab-page" v-show="!lr_loadPage" >
        <template #left>
            <l-panel :title="$t('功能目录')" style="padding-right:0;" >
                <el-tree v-loading="loading" :data="modulesTree" :expand-on-click-node="false"  @node-click="handleNodeClick">
                    <span class="lr-tree-node"  slot-scope="{ node, data }">
                        <i :class="data.f_Icon"></i>
                        {{ $t(node.label) }}
                    </span>
                </el-tree>
            </l-panel>
        </template>
        <l-panel style="padding-left:0;" >
            <template #toolLeft >
                <div class="l-panel--item" >
                    <el-input :placeholder="$t('请输入名称')"  @keyup.enter.native="hanleSearch" v-model="searchWord" size="mini" >
                        <el-button @click="hanleSearch" slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </div>
            </template>
            <template #toolRight >
                <l-tool-btns @click="handleAdd()" >
                    <l-excel-btns></l-excel-btns>
                </l-tool-btns>
            </template>
            <l-table 
                :columns="columns" 
                :dataSource="tableData" 
                :loading="tableLoading"
                row-key="f_Id"
                :isPage="true"
                :pageTotal="tableTotal"
                :tablePage.sync="tableCurrentPage"
                >
                <template v-slot:f_CreateDate="scope" >
                    {{lr_dateFormat(scope.row.f_CreateDate,'yyyy-MM-dd hh:mm:ss')}}
                </template>
                <template v-slot:f_ModuleId="scope" >
                    {{lr_formatValue(scope.row.f_ModuleId,modules,'f_ModuleId','f_FullName')}}
                </template>
                <template v-slot:f_EnabledMark="scope" >
                    <el-switch
                        :active-value="1"
                        :inactive-value="0"
                        v-model="scope.row.f_EnabledMark"
                        @change="handleEnableChange(scope.row)"
                        >
                    </el-switch>
                </template>
                <l-table-btns :btns="tableBtns" @click="lr_handleTableBtnClick" ></l-table-btns>
            </l-table>
        </l-panel>

        <l-dialog 
            :title="formTitle"
            :visible.sync="formVisible"
            :width="1100"
            :height="700"

            @ok="handleSave"
            @close="handleCloseForm"
            @opened="handleOpenedForm"
            >
            <my-form ref="form" :moduleId="currentModuleId"></my-form>       
        </l-dialog>
    </l-layout>
</template>

<script>
import { mapGetters } from "vuex";
import MyForm from './form'
const api = window.$api.excel.import

export default {
    components: {
        MyForm
    },
    data () {
        return {
            lr_isPage:true,
            
            loading:false,
            tableLoading:false,

            searchWord:'',
            columns: [
                {label:'名称',prop:'f_Name',minWidth:'160'},
                {label:'绑定功能',prop:'f_ModuleId',minWidth:'160'},
                {label:'绑定按钮',prop:'f_BtnName',width:'110'},
                {label:'状态',prop:'f_EnabledMark',width:'64',align:'center'},

                {label:'创建人',prop:'f_CreateUserName',width:'140'},
                {label:'创建时间',prop:'f_CreateDate',width:'160'},
            ],
            tableBtns:[
                {prop:'Edit',label:'编辑'},
                {prop:'Delete',label:'删除'}
            ],
            tableData:[],
            tableTotal:0,
            tablePageSize:50,
            tableCurrentPage:1,
            currentModuleId:'',

            formVisible:false,
            formTitle:'',
            formEditRow:null,
            isEdit:false
        };
    },
    computed:{
        ...mapGetters(["modules"]),
        myModules(){
            if(this.loginInfo.f_SecurityLevel == 1){
                return this.modules.filter(t=>t.f_EnabledMark == 1)
            }
            return this.modules.filter(item =>{
                if(item.f_EnabledMark == 1){
                    const moduleAuthIds = this.loginInfo.moduleAuthIds || []
                    if(moduleAuthIds.indexOf(item.f_ModuleId) > -1){
                        return true
                    }
                    else{
                        return false
                    }
                }
                else{
                    return false
                }
            })
        },
        modulesTree(){
            const res = this.$toTree(this.myModules,"f_ModuleId","f_ParentId","f_ModuleId","f_FullName")
            return res.filter(t=>t.f_ParentId == '0')
        }
    },
    mounted () {
        this.loadTableData()
    },
    methods:{
        loadTableData(isNotFirst){
            if(!isNotFirst){
                this.tableCurrentPage = 1;
            }
            this.tableLoading = true;
            let queryData = {
                rows:this.tablePageSize,
                page:this.tableCurrentPage,
                sidx:'F_ModifyDate DESC,F_CreateDate DESC',
                keyword:this.searchWord,
                moduleId:this.currentModuleId,
            }
            api.getPage(queryData).then(res=>{
                const data = this.$deepClone(res.data.data)
                this.tableData = data.rows
                this.tableTotal = data.records
                this.tableLoading = false
            }).catch(()=>{
                this.tableData = []
                this.tableLoading = false
            })
        },
        turnTablePage({rows}){
            this.tablePageSize = rows
            this.loadTableData(true)
        },
        hanleSearch(){
            this.loadTableData()
        },
        handleNodeClick(data) {
            this.currentModuleId = data.value
            this.loadTableData()
        },


        handleEnableChange(row){
            api.updateState(row.f_Id,row.f_EnabledMark).then(()=> {
                this.$message({
                    type: 'success',
                    message: '更新成功!'
                })
            })
        },
        handleAdd(){
            if (!this.currentModuleId) {
                this.$message({
                    type: 'error',
                    message: '请选择功能!'
                })
                return
            }
            this.isEdit = false
            this.showForm('添加快速导入')
        },
        handleEdit($index,row){
            this.isEdit = true
            this.currentModuleId = row.f_ModuleId
            this.formEditRow = row
            this.showForm('编辑快速导入')
        },
        handleDelete($index,row){
            this.$confirm(this.$t('此操作将永久删除该数据, 是否继续?'), this.$t('提示'), {
                confirmButtonText: this.$t('确定'),
                cancelButtonText: this.$t('取消'),
                type: 'warning'
            }).then(() => {
                api.remove(row.f_Id).then(()=> {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    })
                    this.loadTableData()
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })         
            })
        },
        handleSave(showLoading,hideLoading){
            this.$refs.form.validateForm(()=>{
                const postData = this.$refs.form.getForm()
                showLoading()
                if(this.isEdit){// 修改数据
                    api.update(this.formEditRow.f_Id,postData).then(()=> {
                        hideLoading()
                        this.formVisible = false
                        this.$message({
                            type: 'success',
                            message: '更新成功!'
                        })
                        this.loadTableData()
                    }).catch(() => {
                        hideLoading()
                    })
                }
                else{// 新增数据
                    api.add(postData).then(()=> {
                        hideLoading()
                        this.formVisible = false
                        this.$message({
                            type: 'success',
                            message: '添加成功!'
                        })
                        this.loadTableData()
                    }).catch(() => {
                        hideLoading()
                    })
                }
            });
        },
        async handleOpenedForm(showLoading,hideLoading){
            if(this.isEdit){
                showLoading('加载数据中...')
                const data = await  this.$awaitWraper(api.get(this.formEditRow.f_Id))
               
                this.$refs.form.setForm(data)
                hideLoading() 
            }
        },
        handleCloseForm(){
            this.$refs.form.resetForm();
        },
        showForm(text){
            this.formTitle = text;
            this.formVisible = true;
        }
    }

}
</script>
